<template>
  <div class="approval-process">
    <div>{{ value }}</div>
    <div></div>
    <div class="approval-process-cells">
      <template v-for="idx in approvalUsers.length">
        <ApprovalProcessStepsItem v-model="value[idx - 1]" :listType="approvalUsers.listType[idx - 1]" />
        <span class="item-tag-icon">
          <el-icon><Right /></el-icon>
        </span>
      </template>

      <div class="approval-process-steps-item" v-if="!approvalUsers.isDirector && approvalUsers.dt > 0">
        <el-tag class="item-tag" size="large" type="info">何振辉</el-tag>
      </div>
      <span class="item-tag-icon" v-if="!approvalUsers.isDirector && approvalUsers.dt == 2">
        <el-icon><Right /></el-icon>
      </span>
      <div class="approval-process-steps-item" v-if="!approvalUsers.isDirector && approvalUsers.dt == 2">
        <el-tag class="item-tag" size="large" type="info">李一</el-tag>
      </div>
    </div>
  </div>
</template>
<script setup lang="ts">
import { ref, onMounted, watch, computed } from 'vue'
import { Right } from '@element-plus/icons-vue'
import Api from '../../api'
import { useUsersStore } from '../../stores'
import ApprovalProcessStepsItem from './ApprovalProcessStepsItem.vue'

defineProps({
  days: {
    type: Number,
    default: 0,
  },
  modelValue: {
    type: Array,
    default: () => [],
  },
})

const emit = defineEmits(['update:modelValue'])
const value = ref<any[]>([])
// const listType = ref<any[]>([1, 2, 1])
// {{ useUsersStore().getAllState().deptId }}
onMounted(async () => {
  if (useUsersStore().userApprovalList.length == 0) {
    const rows = await Api.Users.getAll({ pageSize: 9999, status: 0 })
    useUsersStore().setUserApprovalList(rows)
  }
  // value.value[3] = setUserValue(113, 3)
  // value.value[4] = setUserValue(112, 4)
  // console.log(value.value)
})

watch(
  () => value.value,
  (val) => {
    emit('update:modelValue', val)
  },
  {
    deep: true,
  }
)
// const setUserValue = (userId: number, index: number) => {
//   const item = useUsersStore().userApprovalList.find((item) => item.userId == userId)
//   value.value[index] = {
//     id: item.userId,
//     text: item.nickName,
//     value: item.userName,
//     userId: item.userId,
//     userName: item.userName,
//     nickName: item.nickName,
//     disabled: false,
//   }
// }

const approvalUsers = computed(() => {
  const result: any = {}
  // if (useUsersStore().getAllState().roles.includes('yuangong')) {
  //   // 普通员工

  //   if (props.days <= 2) {
  //     // 2天以内需要主管/总监、项目制片审核（0-2）
  //     result.length = 2
  //     result.listType = [1, 2]
  //     result.dt = 0
  //     result.isDirector = false
  //   } else if (props.days <= 5) {
  //     // 2天以上5天以内需要主管/总监、项目制片审核、经理(3-5)
  //     result.length = 2
  //     result.listType = [1, 2]
  //     result.dt = 1
  //     result.isDirector = false
  //   } else {
  //     // 5天以上需要主管/总监、项目制片审核、经理、总经理( > 5)
  //     result.length = 2
  //     result.listType = [1, 2]
  //     result.dt = 2
  //     result.isDirector = false
  //   }

  //   if (useUsersStore().getAllState().deptId == '108' || useUsersStore().getAllState().deptId == '226') {
  //     // 动画组 108 / 北京动画组 226
  //     if (props.days <= 2) {
  //       // 2天以内需要主管、总监、项目制片审核（0-2）
  //       result.length = 3
  //       result.listType = [1, 1, 2]
  //       result.dt = 0
  //       result.isDirector = false
  //     } else if (props.days <= 5) {
  //       // 2天以上5天以内需要主管、总监、项目制片审核、经理(3-5)
  //       result.length = 3
  //       result.listType = [1, 1, 2]
  //       result.dt = 1
  //       result.isDirector = false
  //     } else {
  //       // 5天以上需要主管、总监、项目制片审核、经理、总经理( > 5)
  //       result.length = 3
  //       result.listType = [1, 1, 2]
  //       result.dt = 2
  //       result.isDirector = false
  //     }
  //   }
  // } else {
  //   //主管以上（制片）（导演）
  //   if (props.days <= 2) {
  //     // 2天以内需要项目制片审核、经理（ahui）（李总）
  //     result.length = 1
  //     result.listType = [2]
  //     result.dt = 0
  //     result.isDirector = true
  //   } else {
  //     // 2天以上需要项目制片审核、经理、总经理
  //     result.length = 1
  //     result.listType = [2]
  //     result.dt = 1
  //     result.isDirector = true
  //   }
  // }
  return result
})
</script>
<style scoped lang="scss">
.approval-process-cells {
  display: flex;
  flex-wrap: wrap;
  .item-tag-icon {
    margin: 0 10px;
  }
}
</style>
